<template>
  <div class="cont">
    <div class="list">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="label" :title="item.name">{{ item.name }}</div>
        <div class="progress">
          <div class="bar" :style="{ width: item.rate + '%' }">
            <div class="dot"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="chart" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, getCurrentInstance } from 'vue';
import echarts from '@/plugins/echarts.js';
import { realPx } from '@/utils/index.js';

let myChart = null;
const chartRef = ref(null);

const props = defineProps({
  yData: {
    type: Array,
    default: () => [
      {
        name: '数字贸易',
        val: 150,
      },
      {
        name: '新电商',
        val: 20,
      },
      {
        name: '跨境电商',
        val: 10,
      },
      {
        name: '商贸流通',
        val: 60,
      },
      {
        name: '会展经济',
        val: 50,
      },
      {
        name: '服务贸易',
        val: 80,
      },
    ],
  },
});

watch(
  () => props.yData,
  () => {
    renderList();
    myChart.setOption(getOptions());
  }
);

onMounted(() => {
  renderList();
  myChart = echarts.init(getCurrentInstance().refs.chartRef);
  myChart.setOption(getOptions());
  window.addEventListener('resize', resizeChart);
});

const list = ref([]);
function renderList() {
  let yData = props.yData;
  let values = yData.map((item) => item.val);
  let maxVal = Math.max(...values);
  yData.forEach((v) => {
    if (maxVal == 0) {
      v.rate = 0;
    } else {
      v.rate = (v.val / maxVal) * 100;
    }
  });
  list.value = yData;
}

function getOptions() {
  return {
    grid: {
      left: '6%',
      top: '0%',
      right: '6%',
      bottom: '0%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'value',
        axisTick: { show: false },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255,255,255,0.3)',
          },
        },
        axisLabel: {
          color: '#fff',
          fontSize: realPx(16),
        },
        axisLine: {
          lineStyle: {
            color: '#fff',
          },
        },
        data: [],
      },
    ],
    yAxis: {
      show: false,
      type: 'value',
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: 'name',
        type: 'bar',
        itemStyle: {
          opacity: 0,
        },
        data: props.yData.map((item) => item.val),
      },
    ],
  };
}

function resizeChart() {
  myChart.setOption(getOptions());
  myChart.resize();
}
</script>

<style lang="less" scoped>
.cont {
  width: 426px;
  height: 230px;
  position: relative;
  .list {
    width: 400px;
    .item {
      display: flex;
      align-items: center;
      margin-bottom: 16px;
      .label {
        width: 86px;
        text-align: right;
        padding-right: 10px;
        font-size: 16px;
        color: #fff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .progress {
        width: 314px;
        height: 18px;
        background-color: rgba(6, 174, 249, 0.1);
        // padding-right: 12px;
        .bar {
          margin-top: 3px;
          height: 12px;
          background-image: url('~@img/16.webp');
          background-size: 314px 12px;
          background-repeat: no-repeat;
          position: relative;
          transition: all 0.3s;
        }
        .dot {
          width: 13px;
          height: 24px;
          background-image: url('~@img/17.webp');
          background-size: 100% 100%;
          position: absolute;
          top: -8px;
          right: -7px;
          transition: all 0.3s;
        }
      }
    }
  }
  .chart {
    width: 356px;
    height: 230px;
    position: absolute;
    bottom: 0;
    right: 6px;
    z-index: 1;
  }
}
</style>
